<template>
  <div class="cell_style">
    <div class="my-cell" @click="showProject">
      <div class="my-cell-title">
        <span class="weui-label" style="width:100px;font-size:14px">{{title}}</span>
      </div>
      <div class="my-cell-content">
        <tag :value="projectName"></tag>
      </div>
      <!-- <div class="icon"></div> -->
      <!-- <div class="my-cell-icon"  v-if="!readonly">
        <icon name="plus" class="default-icon"></icon>
      </div>-->
    </div>
    <div v-transfer-dom class="self-tree">
      <popup v-model="showFlag" height="100%" :hide-on-blur="false"
        :popup-style="{'z-index':9999,'background': '#ffffff'}">
        <popup-header title="项目选择" left-text="取消" :show-bottom-border="false" @on-click-left="cancel"></popup-header>
        <simple-search @onClear="onClear" @onSearch="onSearch" placeholder="请输入项目名称"></simple-search>
        <div v-for="(item,index) in prjList" :key="index" @click="selected(item)" v-if="!isSearch" class="project">
          {{item.name}}
        </div>
        <div v-for="(item,index) in searchList" :key="index" @click="selected(item)" v-if="isSearch" class="project">
          {{item.name}}
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import Tag from "../tag/tag";
  export default {
    name: "chooseProject",
    components: {
      Tag,
    },
    props: {
      title: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        showFlag: false,
        prjList: [],
        searchList: [],
        isSearch: false,
        keyword: '',
        projectName: '项目群层'
      };
    },
    methods: {
      cancel() {
        this.showFlag = false;
      },
      selected(val) {
        console.log("val", val)
        this.showFlag = false;
        this.projectName = val.name
        this.$emit('selected', val)
      },
      onSearch(val) {
        //每次查询时先将searchList置空
        this.searchList = [];
        this.keyword = val
        if (val != "") {
          this.isSearch = true
          //模糊查询
          this.prjList.map(item => {
            //   console.log(item.name)
            //   console.log(item.name.indexOf(val))
            if (item.name.indexOf(this.keyword) != -1) {
              this.searchList.unshift(item)
            }
          })
        } else {
          this.isSearch = true
          this.searchList = this.prjList
        }
      },
      onClear() {
        this.isSearch = false
      },
      showProject() {
        this.showFlag = true;
        this.selectProject();
      },
      selectProject() {
        if (this.checkNetWork()) {
          this.$ajax({
            url: this.COMMON_URL, //+ "?_method=V_USER_SELECT*getProjectList",
            method: "post",
            data: {
              _method: "V_USER_SELECT*getProjectList",
              pageIndex: "0",
              pageSize: "1000",
              sortField: "",
              sortOrder: ""
            }
          }).then(res => {
            // console.log("部门列表2", res);
            this.prjList = res.data.treedata.map(item => {
              return {
                name: item.NAME,
                value: item.ID
              };
            });
            this.prjList.unshift({
              name: "项目群层",
              value: "0"
            });
            // this.prjList = [this.prjList];
          });
        } else {
          this.$store.state.SQLiteDB.transaction(tx => {
            tx.executeSql('select * from SYS_PROJECTINFO where PROJECTID != "0"', [], (tx, result) => {
              var temp = []
              for (var i = 0; i < result.rows.length; i++) {
                temp[i] = result.rows.item(i);
              }
              this.prjList = temp.map(item => {
                return {
                  name: item.PROJECTNAME,
                  value: item.PROJECTID
                }
              })
              this.prjList.unshift({
                name: '项目群层',
                value: '0'
              })
              // this.prjList = [this.prjList]

            })
          })
        }
      }
    },
    watch: {
      keyword() {
        this.onSearch(this.keyword)
      }
    }
  };

</script>

<style scoped>
  .cell_style {
    background-color: #ffffff;
  }

  .my-cell {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    color: #9f9f9f;
    font-size: 13px;
    left: -15px;
    padding-top: 7px;
  }

  .my-cell::after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    left: -2px;
  }

  .my-cell-title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #000000;
    padding-left: 30px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .my-cell-content {
    position: relative;
    color: #888888;
  }

  .project {
    padding: 10px 15px 10px 10px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(25, 25, 25, 1);
  }

  .moa-search-div {
    margin: 0 !important;
    padding: 12px 16px !important;
    width: 100% !important;
    background-color: #4D86FF !important;
    border: none !important;
    border-radius: 0px !important;
  }

  .vux-popup-header /deep/ .vux-popup-header-title {
    color: #ffffff !important;
  }

  .vux-popup-header /deep/ .vux-popup-header-left {
    color: #ffffff !important;
  }

  .vux-popup-header {
    margin: 0 !important;
    width: 100% !important;
    background-color: #4D86FF !important;
    border: none !important;
    border-radius: 0px !important;
  }

</style>
